<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="stylesheet" href="resources/css/main.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js" charset="utf-8" ></script>
<script src="resources/js/raphael/raphael-min.js" charset="utf-8" ></script>
<script src="resources/js/jquery.mapael.js" charset="utf-8" ></script>
<script src="resources/js/maps/france_departments.js" charset="utf-8" ></script>
<script src="resources/js/maps/world_countries.js" charset="utf-8" ></script>
<script src="resources/js/maps/usa_states.js" charset="utf-8" ></script>
<title>차트</title>
<script type="text/javascript">
//Example #6
$(function(){
	$(".maparea6").mapael({
		map : {
			name : "world_countries",
			defaultArea: {
				attrs : {
					stroke : "#343434", 
					fill: "#343434",
					"stroke-width" : 1,
					
				},
				attrsHover: {
					fill: "#343434"
					, stroke: "#343434"
					, "stroke-width": 1
					, "stroke-linejoin": "round"
				}
			},
			defaultPlot : {
				attrs : {
					fill: "#B60D4A",
				},
				textAttrs  : {
					fill: "#B60D4A",
					"font-size": 24,
					
				}
			}
		},
		areas: {}
	});
	
	
});
</script>
</head>
<body>
<div class="container">
	<div class="maparea6">
		<div class="map">
			<span>Alternative content for the map</span>
		</div>
	</div>
	<div class="maparea11" style="display: none;">
		<div class="map">
			<span>Alternative content for the map</span>
		</div>
	</div>
</div>
</body>
</html>